<template>
	<view class="bookDetailBox">
		<view class="bookDetailHeader">
			<view class="bookDetailHeaderBG">
				<img class="headerBg" :src="bookInfo.img" alt="">
			</view>
			<view class="bookHeaderInfo">
				<img class="bookInfoImg" :src="bookInfo.img" alt="">
				<view class="bookInfoText">
					<view class="bookName">{{bookInfo.name}}</view>
					<view class="bookAuthor">作者:{{bookInfo.author}}</view>
					<view class="bookTip">
						<view class="bookTipItem">{{bookInfo.category_name}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="bookInfo">
			<view class="bookInfoItem">
				<view class="bookInfoItemTitle">更新进度</view>
				<view class="bookInfoItemCon">{{bookInfo.serial_status == 1?'连载中':'已完结'}}</view>
			</view>
			<view class="columBorder"></view>
			<view class="bookInfoItem">
				<view class="bookInfoItemTitle">字数</view>
				<view class="bookInfoItemCon">{{(bookInfo.size/10000).toFixed(2)}}万字</view>
			</view>
			<view class="columBorder"></view>
			<view class="bookInfoItem">
				<view class="bookInfoItemTitle">人气值</view>
				<view class="bookInfoItemCon">{{bookInfo.bookcase_num || 0}}</view>
			</view>
		</view>
		<view class="bookJJ">
			<wuc-tab class="tabTitle" :tab-list="tabList" :tabCur.sync="TabCur" @change="tabChange"></wuc-tab>
			<swiper :current="TabCur" duration="300" @change="swiperChange">
				<swiper-item class="swipeIitem" @click="showPopup(0,bookInfo.book_id,bookInfo.book_source_id)">
					<view class="bookDesc">
						{{bookInfo.desc}}
					</view>
					<img class="btnGo" src="../../../static/btn_go@2x.png" alt="">
				</swiper-item>
				<swiper-item class="swipeIitem" @click="showPopup(1,bookInfo.book_id,bookInfo.book_source_id)">
					<view class="bookZJBox">
						<view class="bookZJ" v-for="(item,index) in zhangjie" :key="index">{{item.name}}</view>
					</view>
					<img class="btnGo" src="../../../static/btn_go@2x.png" alt="">
				</swiper-item>
			</swiper>
			<view class="hotBox">
				<view class="hotHeader">
					大家都在看
				</view>
				<scroll-view class="scroll-view_H" scroll-x="true">

					<view class="scroll-view-item_H " v-for="(item,index) in rankBook" :key="index" @click="goRankDetail">
						<img class="hotImg" :src="item.img" alt="">
						<view class="hotName">{{item.name}}</view>
						<view class="hotAuthor">{{item.author}}</view>
					</view>

				</scroll-view>
			</view>

		</view>
		<uni-drawer :visible="is_show_mulu" @close="is_show_mulu = false" mode="right">
			<view style="padding:30upx;" v-if="is_desc">
				<view class="popupTitle">简介</view>
				<view class="popupCon">{{bookInfo.desc}}</view>
			</view>
			<view style="padding:30upx;" v-else>
				<view class="popupTitle">目录</view>
				<view class="muluList" v-for="(item,index) in muluList" :key="index" @click="goRead" :data-num="item.num" :data-id="bookInfo.book_id"
				 :data-book_source_id="bookInfo.book_source_id" :data-img="bookInfo.img" :data-book_name="bookInfo.name" :data-author="bookInfo.author" :data-desc="bookInfo.desc" data-from="1">{{item.name}}</view>
			</view>
		</uni-drawer>
		<view class="footerBtn">
			<view class="addShujia" @click="addShuJia" :data-item="JSON.stringify(bookInfo)" :class="ifsuccess?'addShujiaA':''">{{ifsuccess?'已加入':'加入书架'}}</view>
			<view class="beginRead" @click="goRead" :data-id="bookInfo.book_id" :data-num="1" :data-book_source_id="bookInfo.book_source_id" :data-img="bookInfo.img" :data-book_name="bookInfo.name" :data-author="bookInfo.author" data-from="0" :data-desc="bookInfo.desc">开始阅读</view>
		</view>
	</view>

</template>

<script>
	import WucTab from '@/components/wuc-tab/wuc-tab.vue';
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue";
	import key from '@/common/key.js';
	import utils from '@/common/utils.js';
	export default {

		data() {
			return {
				is_desc: false,
				visible: true,
				muluList: [],
				is_show_mulu: false,
				is_show_desc: false,
				zhangjie: [],
				TabCur: 0,
				tabList: [{
					name: '简介',
				}, {
					name: '目录'
				}],
				bookInfo: [],
				rankBook: [],
				book_id: 0,
				ifsuccess: false
			}
		},
		onLoad(opt) {
			console.log(opt);
			this.getbookDetail(opt.book_id)
			this.book_id = opt.book_id
			if (uni.getStorageSync('addshujiaData') != []) {
				let storageData = uni.getStorageSync('addshujiaData')
				let is_On = storageData.map((item, index, arr) => {
					return Number(item.book_id)
				})
				this.ifsuccess = is_On.includes(Number(opt.book_id))
			}
		},
		components: {
			WucTab,
			uniDrawer
		},
		methods: {
			// 插件自带方法
			tabChange(index) {
				this.TabCur = index;
			},
			swiperChange(e) {
				let {
					current
				} = e.target;
				this.TabCur = current;
			},
			// 点击事件
			showPopup(opt, book_id, book_source_id) {
				this.is_show_mulu = true
				if (opt == 0) {
					this.is_desc = true
					return;
				}
				this.is_desc = false;
				if (this.muluList.length == 0) {
					this.getDirectory(book_id, book_source_id)
				}
			},
			goRankDetail() {
				// 转成json 字符串
				let rankDatailData = JSON.stringify(this.rankBook)
				// base64 encode
				let mode64 = utils.encode(rankDatailData)
				// url encode
				let modeEncode = encodeURIComponent(mode64)
				uni.navigateTo({
					url: `/pages/childPages/weLook/weLook/weLook?rankDatailData=${modeEncode}&book_id=${this.book_id}`
				})
			},
			goRead(e) {
				let book_id = e.currentTarget.dataset.id
				let book_source_id = e.currentTarget.dataset.book_source_id
				let num = e.currentTarget.dataset.num
				let img = e.currentTarget.dataset.img
				let author = e.currentTarget.dataset.author
				let book_name = e.currentTarget.dataset.book_name
				let froms = e.currentTarget.dataset.from
				let desc = e.currentTarget.dataset.desc
				let allData = {
					book_id:book_id,
					book_source_id:book_source_id,
					num:num,
					img:img,
					author:author,
					book_name:book_name,
					froms:froms,
					desc:desc
				}
				// 转成json 字符串
				let all = JSON.stringify(allData)
				// base64 encode
				let mode64 = utils.encode(all)
				// url encode
				let modeEncode = encodeURIComponent(mode64)
				uni.navigateTo({
					url: `/pages/childPages/read/read?allData=${modeEncode}`
				})
			},
			addShuJia(e) {
				const item = JSON.parse(e.currentTarget.dataset.item);
				const ifsuccess = utils.addshujia(item);
				if (!this.ifsuccess) {
					this.ifsuccess = ifsuccess
				}
			},
			// 请求数据
			getbookDetail(book_id) {
				
				const data = {
					"app": "YLXS_Android",
					"channel": "H5",
					"device_id": 0,
					"t_channel": "YLXS_Android",
					"version": "1.0.0",
					"book_id": book_id
				}

				let sign = utils.sortObj(data)
				uni.request({
					url: `${key.URL}a2/book/xiangqing`,
					method: 'POST',
					data: {
						"app": "YLXS_Android",
						"channel": "H5",
						"device_id": 0,
						"t_channel": "YLXS_Android",
						"version": "1.0.0",
						"book_id": book_id,
						"sign": sign,
					},
					dataType: 'json',
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						if (res.data.status == 200) {
							let bookData = res.data.data.info
							bookData.img = utils.imgMd5(bookData.img)
							this.bookInfo = bookData
							this.zhangjie = res.data.data.contents
							let rank = res.data.data.rank
							rank.forEach((val, index, arr) => {
								arr[index].img = utils.imgMd5(arr[index].img)
							})
							this.rankBook = rank
						}
					}
				});
			},
			getDirectory(book_id, book_source_id) {
				console.log(book_id, book_source_id)
				const data = {
					"app": "YLXS_Android",
					"channel": "H5",
					"device_id": 0,
					"t_channel": "YLXS_Android",
					"version": "1.0.0",
					"book_id": book_id,
					"book_source_id": book_source_id
				}

				let sign = utils.sortObj(data)
				uni.request({
					url: `${key.URL}a2/book/directory`,
					method: 'POST',
					data: {
						"app": "YLXS_Android",
						"channel": "H5",
						"device_id": 0,
						"t_channel": "YLXS_Android",
						"version": "1.0.0",
						"book_id": book_id,
						"book_source_id": book_source_id,
						"sign": sign,
					},
					dataType: 'json',
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						if (res.data.status == 200) {
							this.muluList = res.data.data
						}
					}
				});
			},

		}
	}
</script>

<style>
	.hotHeader {
		font-size: 36upx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: rgba(75, 76, 93, 1);
		padding: 30upx 0;
	}

	.scroll-view_H {
		width: 100%;
		white-space: nowrap;
	}

	.scroll-view-item_H {
		width: 180upx;

		margin-right: 30upx;
		display: inline-block;
	}

	.hotImg {
		width: 180upx;
		height: 240upx;
		margin-bottom: 16upx;
	}

	.hotName {
		font-size: 28upx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: rgba(75, 76, 93, 1);
		overflow: hidden;
		text-overflow: ellipsis;

		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		margin-bottom: 12upx;

	}

	.hotAuthor {
		font-size: 24upx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(129, 130, 149, 1);
	}

	.footerBtn {
		display: flex;
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.footerBtn view {
		width: 50%;
		height: 118upx;
		line-height: 118upx;
		text-align: center;
	}

	.addShujia {
		font-size: 30upx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: rgba(79, 80, 206, 1);
	}

	.addShujiaA {
		font-size: 30upx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: #ccc;
	}

	.beginRead {
		font-size: 15px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		background: #4F50CE;
	}

	.columBorder {
		width: 2upx;
		height: 60upx;
		background: #E9EAF4;
	}

	.bookDetailHeader {
		position: relative;

	}

	.bookDetailHeaderBG {
		width: 100%;
		height: 436upx;
		overflow: hidden;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.88) 68%, rgba(255, 255, 255, 1) 100%);
		position: relative;
	}

	.headerBg {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
	}

	.bookHeaderInfo {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		height: 434upx;
		display: flex;
		padding: 120upx 40upx 0;
		box-sizing: border-box;

	}

	.bookInfoImg {
		width: 210upx;
		height: 280upx;
		margin-right: 40upx;
	}

	.bookName {
		font-size: 20px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: rgba(75, 76, 93, 1);
		margin-bottom: 20upx;
		margin-top: 40upx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.bookAuthor {
		font-size: 15px;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(122, 123, 148, 1);
		margin-bottom: 20upx;
	}

	.bookTip {
		display: flex;
	}

	.bookTipItem {
		width: 64upx;
		height: 32upx;
		line-height: 32upx;
		border-radius: 1px;
		border: 1px solid rgba(79, 80, 206, 1);
		font-size: 20upx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(79, 80, 206, 1);
		text-align: center;
		margin-right: 16upx;
	}

	.bookInfo {
		display: flex;
		padding: 0 72upx;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 38upx;
	}

	.bookInfoItem {}

	.bookInfoItemTitle {
		font-size: 24upx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(179, 179, 193, 1);
		text-align: center;
		margin-bottom: 10upx;
	}

	.bookInfoItemCon {
		font-size: 30upx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: rgba(75, 76, 93, 1);
		text-align: center;
	}

	.bookJJ {
		width: 100%;
		padding: 0 30upx 150upx;
		box-sizing: border-box;
	}

	.tabTitle {
		margin-bottom: 30upx;
	}

	.swipeIitem {
		display: flex;
		align-items: center;

	}

	.bookDesc {
		font-size: 28upx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(129, 130, 149, 1);
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		flex-grow: 1;
	}

	.btnGo {
		width: 18upx;
		height: 32upx;
		display: inline-block;
		margin-left: 6upx;
	}

	uni-swiper {
		display: block;
		height: 136upx;
	}

	.bookZJBox {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex-grow: 1;
	}

	.bookZJ {
		font-size: 28upx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(129, 130, 149, 1);
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.popupTitle {
		font-size: 18px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: rgba(75, 76, 93, 1);
		margin: 30upx 0 20upx;
	}

	.popupCon {
		font-size: 28upx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(129, 130, 149, 1);
		line-height: 46upx;
	}

	.muluList {
		font-size: 28upx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(129, 130, 149, 1);
		margin-top: 52upx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
</style>
